<template>
	<view class="container">
		<view class="ul">
			<view class="li" v-for="item,index in user_list" :key="index">
				<uni-row>
					<uni-col :span="4" class="le">角色</uni-col>
					<uni-col :span="20" class="ri">{{item.role_name}}</uni-col>
				</uni-row>
				<uni-row>
					<uni-col :span="4" class="le">权限</uni-col>
					<uni-col :span="20"  class="ri">{{item.permission}}</uni-col>
				</uni-row>
				<view class="btn_view">
					<button class="del"  @click="set_user(item)">修改</button>
					 <button class="del" @click="del_user(item._id)">删除</button>
				</view>
			</view>
		</view>
		
		<view class="add_float" @click="add_li">
			+
		</view>
		
		<uni-popup ref="popup" type="bottom">
			<view class="box">
				<view>
					<view>
						<uni-row style="display: flex;align-items: center;">
							<uni-col :span="8">角色名称</uni-col>
							<uni-col :span="16"><input class="uni-input" v-model="role_name" focus
									placeholder="请输入角色名称" /></uni-col>
						</uni-row>
					</view>
				</view>
		
				<view class="btns">
					<button class="le" @click="close">取消</button>
					<button class="ri" @click="click_true">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_list: [],
				role_name:'',
				role_id:''
			}
		},
		onPullDownRefresh() {
			this.get_list()
			uni.stopPullDownRefresh()
		},
		onShow() {
			this.get_list()
		},
		methods: {
			set_user(row){
				this.role_id=row._id
				this.role_name=row.role_name
				this.add_li()
			},
			click_true(){
				if(!this.role_name){
					uni.showToast({
						title:'请输入角色名称~',
						icon:'error'
					})
					return false
				}
				const db = uniCloud.database();
				uni.showLoading({
					title:'加载中~',
				})
				
				db.collection('uni-id-roles').where({
					role_name:this.role_name
				}).get().then(res=>{
					console.log(res)
					if(res.result.data.length==0){
						if(this.role_id){
							 db.collection('uni-id-roles').doc(this.role_id).update({
								 role_name:this.role_name
							 })
							 uni.showToast({
							 	title:'提交成功~',
							 	icon:'none'
							 })
							 uni.hideLoading()
						}else{
							uniCloud.callFunction({
								name:'add_roles',
								data:{
									role_name:this.role_name
								}
							}).then(ress=>{
								console.log(ress)
								uni.showToast({
									title:'提交成功~',
									icon:'none'
								})
								uni.hideLoading()
								this.$refs.popup.close()
								this.get_list()
							})
						}
						
					}else{
						uni.hideLoading()
						uni.showToast({
							title:'名称重复~',
							icon:'none'
						})
					}
				})
				
				
			},
			add_li(){
				this.$refs.popup.open('center')
			},
			get_list() {
				const db = uniCloud.database();
				db.collection('uni-id-roles').get().then(res => {
					console.log(res)
					console.log(res)
					this.user_list = res.result.data
				})
			},
			del_user(id){
				var that=this
				uni.showModal({
					title: '警告!',
					content: '此操作不可逆.,将彻底清除所有记录!',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.showLoading({
								title:'加载中~',
							})
							const db = uniCloud.database();
							// db.collection('user-list').doc(id).remove();
							db.collection('uni-id-roles').where({
							 _id:id
							}).remove()
							uni.hideLoading()
							that.get_list()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
		box-sizing: border-box;
	}

	.ul .li {
		background: #f5f5f5;
		padding: 20rpx;
		box-sizing: border-box;
		margin-top:15px;
		border-radius: 10rpx;
		color: #333;
		box-shadow: 1px 1px 3px 1px #333;
	}
	.ul .li .uni-row {
		margin-top: 10px
	}
	
	.ul .li .uni-row .le{
		font-weight:bold;
	}
	
	.ul .li .btn_view{
		display: flex;
		align-items: center;
		justify-content:flex-start;
		
	}
	
	.ul .li .btn_view button{
		width: fit-content;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 24rpx;
		color: #fff;
	}
	
	.del{
		background: #b41a43;
	}
	.btn{
		background: #2873b9;
	}
	
	.add_float {
		width: 100rpx;
		height: 100rpx;
		background: #ff8272;
		color: #fff;
		font-size: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 200rpx;
		right: 50rpx;
		border-radius: 100rpx;
	}
	
	.box {
		width: 600rpx;
		margin: 0 auto;
		background: #fff;
		padding: 25rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
	}
	
	.box .uni-row {
		margin-top: 15rpx;
	}
	
	.box input {
		border: 1px solid #7a2323;
		height: 66rpx;
		line-height: 66rpx;
		padding: 10rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		color: #7a2323;
		font-size: 30rpx;
	}
	
	.box .btns {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 80rpx;
	}
	
	
	.box .btns button {
		padding:5rpx 30rpx;
		box-sizing: border-box;
		background: #2873b9;
		font-size:24rpx;
		text-align: center;
		color: #fff;
	}
	
	.box .btns button.le {
		background: #2873b9;
	}
	
</style>